<template>
	<view class="content">
		<!-- <view v-for="(item, index) in dataList" :key="index">
			<p class="date">{{ item.time }}</p> -->
		<view class="detail-section" v-for="(detail, detailIndex) in dataList" :key="detailIndex">
			<view class="left-column">
				<p class="name">{{ detail.remark }}</p>
				<p class="time">{{ detail.creationTime }}</p>
			</view>
			<p class="money"
				:class="{ positive: detail.expenditureOrIncome, negative: !detail.expenditureOrIncome==1 }">
				<span v-if="detail.expenditureOrIncome==1">+</span>
				<span v-else>-</span>
				{{ detail.operatingAmount }}
			</p>
		</view>
		<!-- </view> -->
		<view v-if="!dataList.length">
			<image style="margin:10%;" src='../../../static/null/null.png'></image>
		</view>
	</view>
</template>

<script>
	import {
		getJournal
	} from '@/api/money.js';

	export default {
		data() {
			return {
				dataList: [],
				pageSize: 20,
				pageNumber: 1,
				totalPages: 0, // 总页数
				hasMoreData: true, // 是否还有更多数据
			};
		},
		onLoad() {
			this.getList();
		},
		methods: {
			getList() {
				const params = {
					currencyType: 0,
					pageSize: this.pageSize,
					pageNumber: this.pageNumber,
				};

				getJournal(params).then(res => {
					if (res.data && res.data.records) {
						this.dataList = [...this.dataList, ...res.data.records];
						this.totalPages = Math.ceil(res.data.total / this.pageSize);
						this.hasMoreData = this.pageNumber < this.totalPages;
					}
				});
			},
			loadMore() {
				if (!this.hasMoreData) return;

				this.pageNumber += 1;
				this.getList();
			}
		},
		onReachBottom() {
			this.loadMore();
		}
	}
</script>

<style lang="scss">
	@import '@/uni.scss'; // 导入全局 SCSS 变量文件

	.content {
		min-height: 100vh;
		background-color: #F3F3F3;
		padding: 20rpx;
	}

	.date {
		font-size: 44rpx;
		font-weight: bold;
		color: #333333;
		margin: 30rpx 0rpx;
	}

	.detail-section {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		border-radius: 10rpx;
		margin-bottom: 2rpx;
		background-color: #fff;
	}

	.left-column {
		display: flex;
		flex-direction: column;
	}

	.name {
		font-size: 28rpx;
		color: #000000;
		margin-bottom: 5rpx;
	}

	.time {
		font-size: 26rpx;
		color: #999999;
	}

	.money {
		font-size: 32rpx;
		font-weight: bold;
	}

	.positive {
		color: #EC6356;
	}

	.negative {
		color: #000000;
	}
</style>